<template>
  <p-modal
    title="设置显示字段"
    :visible="visible"
    :confirm-loading="confirmLoading"
    :top="500"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <p-table
      :columns="modelColumns"
      :data-source="modelData"
      :scroll="{ y: 200 }"
      :row-selection="{
        selectedRowKeys: selectedRowKey,
        onChange: onSelectChange,
        getCheckboxProps: getCheckboxProps,
      }"
      bordered
      :pagination="false"
    />
  </p-modal>
</template>
<script>
export default {
  props: {
    visible: {
      type: [Boolean],
      default: false,
    },
  },
  data() {
    return {
      selectedRowKey: [
        '序号',
        '销售组',
        '客户简称',
        '客户项目',
        '内部项目',
        '机种',
        'Model Name',
        '应用别',
        '形态',
        '生产地',
        '模切比',
        '备注',
        '数量（小片Kpcs）',
        '单价（人民币）',
        '营收（人民币）',
        '数量（大板Ksht）',
      ],
      modelColumns: [
        {
          align: 'center',
          title: '序号',
          dataIndex: 'number',
          key: 'number',
          width: 40,
        },
        {
          align: 'center',
          title: '字段名称',
          dataIndex: 'fileName',
          key: 'fileName',
          width: 120,
        },
      ],
      modelData: [
        {
          key: '序号',
          number: '1',
          fileName: '序号',
        },
        {
          key: '销售组',
          number: '2',
          fileName: '销售组',
        },
        {
          key: '客户简称',
          number: '3',
          fileName: '客户简称',
        },
        {
          key: '客户项目',
          number: '4',
          fileName: '客户项目',
        },
        {
          key: '内部项目',
          number: '5',
          fileName: '内部项目',
        },
        {
          key: '机种',
          number: '6',
          fileName: '机种',
        },
        {
          key: 'Model Name',
          number: '7',
          fileName: 'Model Name',
        },
        {
          key: '应用别',
          number: '8',
          fileName: '应用别',
        },
        {
          key: '形态',
          number: '9',
          fileName: '形态',
        },
        {
          key: '生产地',
          number: '10',
          fileName: '生产地',
        },
        {
          key: '模切比',
          number: '11',
          fileName: '模切比',
        },
        {
          key: '备注',
          number: '12',
          fileName: '备注',
        },
        {
          key: '数量（小片Kpcs）',
          number: '13',
          fileName: '数量（小片Kpcs）',
        },
        {
          key: '单价（人民币）',
          number: '14',
          fileName: '单价',
        },
        {
          key: '营收（人民币）',
          number: '15',
          fileName: '营收',
        },
        {
          key: '数量（大板Ksht）',
          number: '16',
          fileName: '数量（大板Ksht）',
        },
      ],
    };
  },
  methods: {
    handleCancel() {
      this.$emit('update:visible', false);
    },
    handleOk() {
      this.handleCancel();
      this.$emit('tableShowItem', this.selectedRowKey);
    },
    onSelectChange(selectedRowKey) {
      this.selectedRowKey = selectedRowKey;
    },
    getCheckboxProps(record) {
      return {
        props: {
          disabled:
            record.fileName === '客户简称' ||
            record.fileName === '机种' ||
            record.fileName === 'Model Name' ||
            record.fileName === '应用别' ||
            record.fileName === '形态',
        },
      };
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .poros-table-tbody > tr > td {
  padding: 2px;
}
/deep/ .poros-table-thead > tr > th {
  padding: 0;
}
</style>
